<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        span {
            /* 转化span模式，使span能设置宽高 */
            display: inline-block;
            width: 60px;
            height: 40px;
            background-color: #333;
            color: #fff;
            font-weight: 900;
            /* 使方块中文字居中 */
            text-align: center;
            line-height: 40px;
        }
        
        .box {
            display: flex;
            height: 98vh;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <p>离到家还有：</p>
        </div>
        <div>
            <span class="day"></span><strong>:</strong>
            <span class="hour">1</span> <strong>:</strong>
            <span class="minute">2</span> <strong>:</strong>
            <span class="second">3</span>
        </div>

    </div>


    <script>
        //获取元素
        var day = document.querySelector(".day")
        var hour = document.querySelector(".hour");
        var minute = document.querySelector(".minute");
        var second = document.querySelector(".second");
        //获取截止时间的时间戳（单位毫秒）
        var inputTime = +new Date("2023-07-15 03:45:00");

        //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
        countDown();
        //定时器 每隔一秒变化一次
        setInterval(countDown, 1000);

        function countDown() {
            //获取当前时间的时间戳（单位毫秒）
            var nowTime = +new Date();
            //把剩余时间毫秒数转化为秒
            var times = (inputTime - nowTime) / 1000;
            // 计算天数  转化为整数
            var d = parseInt(times / 60 / 60 / 24);
            day.innerHTML = d + "天";
            //计算小时数 转化为整数
            var h = parseInt(times / 60 / 60 % 24);
            //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
            hour.innerHTML = h + "小时";
            //计算分钟数 转化为整数
            var m = parseInt(times / 60 % 60);
            //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            minute.innerHTML = m + "分钟";
            //计算描述 转化为整数
            var s = parseInt(times % 60);
            //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            second.innerHTML = s + "秒";
        }
    </script>
</body>

</html>